<template>
	<view>
		<!-- #ifdef H5 -->
		<back></back>
		<!-- #endif -->
		<view class="wrap-options" v-if="list.length > 0">
			<view class="num-bg">
				共{{count}}件宝贝
			</view>
			
			<view class="btn-bg" @click="onChooseOptions">
				<view v-if="isEdit">完成</view>
				<view v-else>编辑</view>
			</view>
		</view>
		
		<view class="out">
			<view class="card" v-for="(item,index) in list" @click.stop="jump('/pages/index/findDetail?id='+item.id)">
				<view class="u-flex" v-if="item[0]">
					<view class="square" @click.stop="checkboxChange(item[0],index,1)">
						<image src="@/static/yCreate/successful.png" v-if="item[0].outShow" class="sign" mode="widthFix">
						</image>
					</view>
					<view class="shop-message u-flex">
						<view>{{item[0].shop_name}}</view>
						<view class="standing standing2 u-flex-center" v-if="item[0].isself==1" >平台</view>
						<view class="standing u-flex-center" v-else>商家</view>
					</view>
				</view>
				<u-swipe-action :show="_item.showOptions" :index="_index"
					v-for="(_item,_index) in item"
					@click="click(item,_index)" 
				>
					<!-- @open="open(_item)"
					:options="options" -->
					<view class="card-item u-flex-center" @click="onGoodsDetail(_item)">
						<view class="square" @click.stop="checkboxChange(_item,index,2)">
							<image src="@/static/yCreate/successful.png" v-if="_item.show" class="sign" mode="widthFix">
							</image>
						</view>
							<view class=" title-wrap u-flex u-col-top" style="width: 100%;">
								<image :src="_item.image" mode="aspectFill" class="goods-img"></image>
								<view class="message" style="width: 100%;">
									<view class="u-line-2">{{_item.title}}</view>
									<view class="cate">规格：<text v-for="(__item,__index) in _item.sku.difference">{{__item+' '}}</text></view>
									<view class="u-flex u-row-between u-m-t-30">
										<view class="price"><text>￥</text>{{_item.sku.price}}</view>
										<u-number-box v-model="_item.number" @minus="minus($event,_item)" @plus="plus($event,_item)" :input-width="50" :input-height="50" :min="0"></u-number-box>
									</view>
								</view>
						</view>
					</view>
				</u-swipe-action>
				<!-- <view class="card-item u-flex-center" v-for="(_item,_index) in item">
					<view class="square" @click.stop="checkboxChange(_item,index,2)">
						<image src="@/static/yCreate/successful.png" v-if="_item.show" class="sign" mode="widthFix">
						</image>
					</view>
					<view class="u-flex u-col-top" style="width: 100%;">
						<image :src="_item.image" mode="aspectFill" class="goods-img"></image>
						<view class="message" style="width: 100%;">
							<view class="u-line-2">{{_item.title}}</view>
							<view class="u-flex u-row-between u-m-t-30">
								<view class="price"><text>￥</text>{{_item.sku.price}}</view>
								<u-number-box v-model="_item.number" @minus="minus(_item)" @plus="plus(_item)" :input-width="50" :input-height="50" :min="1"></u-number-box>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="placeholder"></view><!-- 防止内容塌陷 -->
		<view class="btn-box" v-if="list.length > 0">
			<view class="u-flex u-row-between" style="width: 100%;">
				<view class="u-flex">
					<view class="square" @click="checkedAll">
						<image v-if="isAll" src="@/static/yCreate/successful.png" class="sign" mode="widthFix">
						</image>
					</view>
					<view>全选</view>
				</view>
				
				<view class="edit-bg" v-if="isEdit">
					<view class="delete" @click.stop="onDelete">
						删除
					</view>
				</view>
				
				<view class="u-flex-center" v-else>
					<view class="u-flex-col u-col-bottom u-m-r-30">
						<view class="u-flex">
							<view class="total">合计：</view>
							<view class="price"><text>￥</text>{{totalPrice}}</view>
						</view>
						<view class="message">包邮到家</view>
					</view>
					<view class="btn u-flex-center" @tap="$u.throttle(submit, 1500)">结算({{chooseList.length}})</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAll: false,
				isEdit: false, //编辑状态
				list: [],
				chooseList: [],
				subList: [],
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				count: 0,
			};
		},
		onLoad() {
			// this.list.map(item => {
			// 	this.$set(item, 'show', false);
			// })
		},
		onShow() {
			this.isAll=false,
			this.chooseList=[],
			this.subList=[],
			this.getList();
			// this.mescroll.resetUpScroll();
		},
		computed: {
			totalPrice() {
				let totalPrice = 0
				if(this.list) {
					this.list.map(item => {
						if(item.map) {
							item.map(_item=> {
								_item.show ? totalPrice += Number(_item.sum)  : totalPrice += 0
							})
						}
						
					})
					return totalPrice.toFixed(2); // 保留两位小数（否则会价格会出现多位小数）
				}
				
			}
		},
		methods: {
			click(item,index) {
				let list = []
				list[0]=item[index]
				
				this.deleteData(list)
			},
			open(item) {
				this.list.map((val, idx) => {
					val.map(val2=>{
						val2.showOptions = false;
					})
				})
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				item.showOptions = true;
				
			},
			getList() {
				this.$u.post('/api/wanlshop/cart/synchro2').then(res=> {
					this.list = res.data
					this.list.map(item=>{
						this.$set(item[0],'outShow',false)
						item.map(_item=>{
							this.$set(_item,'show',false)
							this.$set(_item,'showOptions',false)
						})
					})
					this.getId()
					this.onCalculation()
				})
			},
			minus(a,e) {
				if (e.number === 0) {
					this.deleteData([e])
					return;
				}
				this.$u.post('/api/wanlshop/cart/storage',{
					goods_id: e.goods_id,
					number: e.number,
					sku_id: e.sku_id,
					sum: e.sum,
					type: "bcsub",
				}).then(res=> {
					if(res.code==1) {
						// this.getList() 
						e.sum = Number(e.sku.price)*a.value
					}else {
						this.$u.toast(res.msg)
					}
				})
			},
			plus(a,e) {
				this.$u.post('/api/wanlshop/cart/storage',{
					goods_id: e.goods_id,
					number: e.number,
					sku_id: e.sku_id,
					sum: e.sum,
					type: "bcadd",
				}).then(res=> {
					if(res.code==1) {
						// this.getList()
						e.sum = Number(e.sku.price)*a.value
					}else {
						this.$u.toast(res.msg)
					}
				})
			},
			getId() {
				this.chooseList = [];
				this.subList = [];
				this.list.map((item, index) => {
					item.map(_item=>{
						if(_item.show==true) {
							this.subList.push(_item)
							this.chooseList.push({
								goods_id: _item.goods_id,
								number: _item.number,
								sku_id: _item.sku_id
							});
						}
					})
				})
				console.log(this.chooseList,'-----');
			},
			checkedAll() {
				if (!this.isAll) {
					this.isAll = true;
					this.list.map((item, index) => {
						item[0].outShow = true;
						item.map(_item=>{
							_item.show = true;
						})
					})
				} else {
					this.list.map((item, index) => {
						item[0].outShow = false;
						item.map(_item=>{
							_item.show = false;
						})
					})
					this.isAll = false;
				}
				this.getId()
			},
			checkboxChange(item, index,type) {
				var list = []
				var list1 = []
				if(type==2) {
					if (!item.show) {
						item.show = true;
					} else {
						item.show = false;
					}
					this.list[index].map(_item=>{
						list1.push(_item.show)
					})
					if (list1.some(item => item === false)) {
					  	this.list[index][0].outShow = false;
					} else {
						this.list[index][0].outShow = true;
					}
					
				}else {
					if (!item.outShow) {
						item.outShow = true;
						this.list[index].map(_item=>{
							_item.show = true
						})
					} else {
						item.outShow = false;
						this.list[index].map(_item=>{
							_item.show = false
						})
					}
				}
				this.list.map(_item=>{
					_item.map(item2=> {
						list.push(item2.show)
					})
				})
				if (list.some(item => item === false)) {
				  	this.isAll = false;
				} else {
					this.isAll = true;
				}
				this.getId()
			},
			submit() {
				if(this.chooseList.length>0) {
					this.jump('/yCreate/pages/confirmOrder?ids='+JSON.stringify(this.chooseList)+'&subList='+JSON.stringify(this.subList))
				}else {
					this.$u.toast('请选择商品后点击结算')
				}
			},
			jump(url) {
				uni.navigateTo({
					url:url
				})
			},
			/**
			 * 编辑状态更改
			 */
			onChooseOptions() {
				this.isEdit = !this.isEdit;
			},
			/**
			 * 删除
			 */
			onDelete() {
				if (this.chooseList.length > 0) {
					uni.showModal({
						title:"确定删除吗?",
						success: res => {
							if (res.confirm) {
								this.deleteData(this.chooseList)
							}
						}
					})
				} else {
					this.$u.toast('请选择商品后在删除')
				}
			},
			deleteData(list) {
				this.$u.post('/api/wanlshop/cart/storage',{
					data:list,
					type:'del'
				}).then(res=>{
					if(res.code==1) {
						this.getList()
						this.isEdit = false
						this.isAll = false
					}else {
						this.$u.toast(res.msg)
					}
				})
			},
			/**
			 * 计算购物车数量
			 */
			onCalculation() {
				let count = 0;
				for (let i = 0; i < this.list.length; i++) {
					for (let j = 0; j < this.list[i].length; j++) {
						count++
					}
				}
				this.count = count
			},
			onGoodsDetail(item) {
				uni.navigateTo({
					url: '/wNew/pages/detail?id=' + item.goods_id
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
	}
	
	.wrap-options {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		height: 100rpx;
		z-index: 10;
		background-color: white;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		justify-content: space-between;
		
		.num-bg {
			color: #333;
			font-size: 30rpx;
		}
		
		.btn-bg {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			font-size: 30rpx;
		}
	}
	
	.edit-bg {
		display: flex;
		align-items: center;
		overflow: hidden;
		
		.delete {
			width: 210rpx;
			height: 79rpx;
			// background: linear-gradient(to right,#39be86,#81d592);
			background-color: red;
			border-radius: 45rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			overflow: hidden;
			line-height: 79rpx;
			text-align: center;
		}
	}
</style>
<style lang="scss">
	.price {
		font-size: 40rpx !important;
		font-weight: 550;
		color: #EF5205;
		text {
			font-weight: 500;
			font-size: 20rpx;
		}
	}
	.square {
		flex-shrink: 0;
		width: 40rpx;
		height: 40rpx;
		position: relative;
		margin-right: 25rpx;
		border: 1rpx solid #DCDCDC;
		border-radius: 50%;

		image {
			width: 38rpx;
			height: auto;
			position: absolute;
			bottom: 0rpx;
		}
	}

	.out {
		padding: 20rpx;
		.edit-btn {
			width: 128rpx;
			height: 48rpx;
			border-radius: 50rpx;
			background: linear-gradient(to right,#39be86,#81d592);
			font-size: 24rpx;
			color: #FFFFFF;
		}

		.card {
			margin-top: 30rpx;
			padding: 30rpx;
			background: #FFFFFF;
			&:first-child {
				margin-top: 0rpx;
			}
			.card-item {
				padding-top: 30rpx;
				&:not(:last-child) {
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid #DFDFDF;
				}
			}
			.shop-message {
				font-size: 32rpx;
				font-weight: 550;
				.standing {
					margin-left: 18rpx;
					width: 64rpx;
					height: 32rpx;
					background: #F43000;
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #FFFFFF;
				}
				.standing2 {
					background: #606DCE;
				}
			}
			.right-icon {
				width: 12rpx;
				height: auto;
			}
			.goods-img {
				margin-left: 15rpx;
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
				flex-shrink: 0;
			}

			.message {
				margin-left: 36rpx;
				.cate {
					margin-top: 10rpx;
					width:fit-content;
					width:-webkit-fit-content;
					width:-moz-fit-content;
					padding: 3rpx;
					background: #fafafa;
					font-size: 22rpx;
					border-radius: 5rpx;
				}
				view {
					font-size: 28rpx;
				}
			}
		}
	}

	.placeholder {
		width: 100%;
		height: 174rpx;
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		padding: 8rpx 34rpx 0 41rpx;
		width: 100%;
		height: 144rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 0rpx 0rpx #E7E7E7;
		border-radius: 10rpx;
		.total {
			font-size: 24rpx;
			color: #222;
		}
		
		.message {
			font-size: 24rpx;
			color: #888888;
		}
		.btn {
			width: 210rpx;
			height: 79rpx;
			background: linear-gradient(to right,#39be86,#81d592);
			border-radius: 45rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>